<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
  <h3>dabdd</h3>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <p v-pin:[left]="100">我固定在页面左侧100px处。</p>
  <p v-pin:[right]="100">我固定在页面右侧100px处。</p>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
<script>
  Vue.directive('pin', {
    bind: function (el, binding, vnode) {
      el.style.position = 'fixed';
      var s = (binding.arg === 'left' ? 'left' : binding.arg);
      el.style[s] = binding.value + 'px';
    }
  })
  var vm = new Vue({
    el:'#app',
    data:{
      right: 'right',
      left: 'left'
    }
  });
</script>
</html>